import { ref } from 'vue'
import TagSelector from '@/components/index/tagSelector.vue'
import useAnime from '@/utils/anime'
import useTagsControl from '@/components/index/hooks/tagsControl'
import ContentTitle from '@/components/index/contentTitle.vue'
import { useCardStore } from '@/stores/cardStore'
import { useMainIndexStore } from '@/stores/mainIndexStore'
import { storeToRefs } from 'pinia'
export default function () {
  const { fadeOut } = useAnime()
  const path = ref('')

  // select 数据
  const selectData = [
    { id: 0, value: '标题' },
    { id: 1, value: '热度' },
    { id: 2, value: '时间' }
  ]
  // 显示
  const { showSelector } = useMainIndexStore()

  // 关闭
  function closeSelector() {
    if (path.value === 'card') {
      fadeOut(selector.value)
      setTimeout(() => {
        isShowSelector.value = false
      }, 200)
    }
  }
  // 初始化 cardData
  const { cardData } = storeToRefs(useCardStore())

  // 筛选方法
  // 提供控制筛选的方法
  const { selector, isShowSelector } = storeToRefs(useMainIndexStore())
  const { cardSortAsHot, cardSortAsTime, cardAsTitle } = useCardStore()
  function handleClick(id: number) {
    switch (id) {
      case 0:
        // 标题排序
        cardAsTitle()
        break
      case 1:
        // 按热度排序
        cardSortAsHot()
        break
      case 2:
        // 按时间排序
        cardSortAsTime()
        break
      default:
        // 报错
        break
    }
  }

  // 子组件 tagSelector
  // 控制显示
  const { tagsVisible } = useTagsControl()

  return {
    selector,
    isShowSelector,
    selectData,
    showSelector,
    closeSelector,
    handleClick,
    tagsVisible,
    cardData,
    TagSelector,
    ContentTitle
  }
}
